<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <style>
        .button {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        form {
            margin-top: 20px;
        }
        form label, form input {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>


<h1>用户管理</h1>


<button class="button" id="addUser">增加</button>
<button class="button" id="deleteUser">删除</button>
<button class="button" id="updateUser">修改</button>
<button class="button" id="searchUser">查询</button>


<form id="userForm">
    <label for="userId">用户ID:</label>
    <input type="text" id="userId" name="userId" required>

    <label for="userName">姓名:</label>
    <input type="text" id="userName" name="userName" required>

    <label for="balance">余额:</label>
    <input type="number" id="balance" name="balance" required>

    <button type="submit" class="button">提交</button>
</form>
<script src="/js/jquery-3.3.1.min.js"></script>

<script>
    document.getElementById('addUser').addEventListener('click', function() {
        let addlogin = {
            id: document.getElementById('userId').value,
            name: document.getElementById('userName').value,
            balance: document.getElementById('balance').value
        };
        $.ajax({
            url: 'account',
            type: 'POST',
            data: JSON.stringify(addlogin),
            contentType: 'application/json; charset=utf-8',
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('Error');
            }
        });
        alert('Add user functionality to be implemented');
    });

    document.getElementById('deleteUser').addEventListener('click', function() {
        let addlogin = {
            id: document.getElementById('userId').value
        };
        $.ajax({
            url: 'account/delete',
            type: 'POST',
            data: JSON.stringify(addlogin),
            contentType: 'application/json; charset=utf-8',
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('Error');
            }
        });
        alert('Delete user functionality to be implemented');
    });

    document.getElementById('updateUser').addEventListener('click', function() {
        let addlogin = {
            id: document.getElementById('userId').value,
            name: document.getElementById('userName').value,
            balance: document.getElementById('balance').value
        };
        $.ajax({
            url: `account/${addlogin.id}`,
            type: 'PUT',
            data: JSON.stringify(addlogin),
            contentType: 'application/json; charset=utf-8',
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('Error');
            }
        });
        alert('Update user functionality to be implemented');
    });

    document.getElementById('searchUser').addEventListener('click', function() {
        let addlogin = {
            id: document.getElementById('userId').value
        };
        $.ajax({
            url: 'account',
            type: 'GET',
            data: addlogin,
            contentType: 'application/json; charset=utf-8',
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('Error');
            }
        });
        alert('Search user functionality to be implemented');
    });

    document.getElementById('userForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission

        // Add user form submission logic
        let addlogin = {
            id: document.getElementById('userId').value,
            name: document.getElementById('userName').value,
            balance: document.getElementById('balance').value
        };
        $.ajax({
            url: 'account',
            type: 'POST',
            data: JSON.stringify(addlogin),
            contentType: 'application/json; charset=utf-8',
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('Error');
            }
        });
        document.getElementById('addUser').addEventListener('click', function() {
            let addlogin = {
                id: document.getElementById('userId').value,
                name: document.getElementById('userName').value,
                balance: parseFloat(document.getElementById('balance').value) // Convert balance to a floating point number
            };
            $.ajax({
                url: 'account',
                type: 'POST',
                data: JSON.stringify(addlogin),
                contentType: 'application/json; charset=utf-8',
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr, status, error) {
                    alert('Error');
                }
            });
            alert('Add user functionality to be implemented');
        });

    });

</script>
</body>
</html>
